<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item label="工单编号:" extra style=" font-size:16px ; font-weight: 400;">
          <el-input v-model="formInline.taskCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态:">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="待办" value="1" />
            <el-option label="进行" value="2" />
            <el-option label="取消" value="3" />
            <el-option label="完成" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="onSubmit"
        >新建</el-button>
        <el-button type="primary" class="buttonbodyfoot" @click="setDialogOpen">工单配置</el-button>
        <!-- table表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :border="false"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column prop="index" label="序号" width="80px" />
          <el-table-column prop="taskCode" label="工单编号" align="center" />
          <el-table-column prop="innerCode" label="设备编号" align="center" />
          <el-table-column prop="taskType.typeName" label="工单类型" align="center" />

          <el-table-column prop="address" label="工单方式" align="center">
            <template #default="{row}">
              {{ row.createType==='0' ? "手动" : "自动" }}

            </template>
          </el-table-column>
          <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" align="center" />
          <el-table-column prop="userName" label="运营人员" align="center" />
          <el-table-column prop="createTime" label="创建日期" align="center" />
          <el-table-column prop="address" label="操作" align="center">
            <template #default="{row}">
              <el-button
                type="text"
                class="button_table_foot"
                @click="fun(row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>共{{ queryObj.totalCount }}条记录 第 {{ queryObj.pageIndex }}/{{ queryObj.totalPage }} 页</p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              class="foot_button_top"
              @click="change1"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              @click="change"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div>
      <el-dialog title="新增工单" :visible.sync="outerVisible" width="30%">
        <!-- 表单 -->
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
          <el-form-item label="设备编号" style="width:480px" prop="innerCode">
            <el-input v-model="formLabelAlign.innerCode" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item label="工单类型" style="width:420px" prop="productType">
            <el-select v-model="formLabelAlign.productType" placeholder="请选择" style="width:405px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="补货数量" style="width:480px">
            <template>
              <el-button type="text" size="small" style="font-size:15px" @click="handleClick"> <i class="el-icon-s-order" />补货清单  </el-button>

            </template>
          </el-form-item>
          <el-form-item label="运营人员" style="width:480px" prop="userId">
            <el-select v-model="formLabelAlign.userId" style="width:410px">
              <el-option v-for="item in roleList " :key="item.id" :value="item.id" :label="item.userName" />

            </el-select>

          </el-form-item>
          <el-form-item label="备注" style="width:480px" prop="desc">
            <el-input
              v-model="formLabelAlign.desc"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <!-- 表单 -->

        <div slot="footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="data1">确定</el-button>
        </div>
      </el-dialog>

      <!-- 内层 -->
      <el-dialog title="补货详情" :visible.sync="innerVisible" width="30%">
        <div>
          <el-table
            :data="tableData1"
            style="width: 100%"
            :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
          >
            <el-table-column
              label="货道编号"
              width="90"
              prop="channelCode"
            />

            <el-table-column
              label="商品名称"
              width="100"
              prop="sku.skuName"
            >
              <template #default="{row}">
                <span v-if="row.sku">{{ row.sku.skuName }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>

            <el-table-column
              label="当前数量"
              width="60"
              prop="currentCapacity"
            >
              <template #default="{row}">
                <span v-if="row.sku">{{ row.currentCapacity }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              label="还可添加"
              width="60"
            >
              <template #default="{row}">
                <span v-if="row.sku">{{ row.maxCapacity-row.currentCapacity }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              label="补满数量"
            >
              <template #default="{row}">
                <el-input-number v-if="row.sku" v-model="row.maxCapacity" controls-position="right" :min="1" :max="10" :disabled="row.currentCapacity===10" @change="handleChange" />
                <span v-else>货道暂无商品</span>

              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible = true">内层</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 查看详情-->
    <div>
      <el-dialog
        v-if="row"
        center
        title="工单详情"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <div>
          <div class="middle">
            <img v-if="row.taskStatusTypeEntity.statusId === 4" src="…WSCJ+FNOoz7dIyTo8/wDHwkf9fxFtzQAAAABJRU5ErkJggg==" alt="" class="dailogImg">
            <img v-else-if="row.taskStatusTypeEntity.statusId === 3" src="…phY9b42klhCgT0WHWAfIXFPYBcBvJ9uQAAAAASUVORK5CYII=" alt="" class="dailogImg">
            <img v-else-if="row.taskStatusTypeEntity.statusId === 1" src="…fkUQ1At8H0npMZOeF/UD+BpwnSWqJuP2NAAAAAElFTkSuQmCC" alt="" class="dailogImg">
            <span>{{ row.taskStatusTypeEntity.statusId === 4 ? '成功' : row.taskStatusTypeEntity.statusId === 1 ? '待办' : row.taskStatusTypeEntity.statusId === 3 ? '取消' : 'Wu ' }}</span>
            <img v-if="row.taskStatusTypeEntity.statusId === 3" src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="" class="dailogImg">
            <img v-else-if="row.taskStatusTypeEntity.statusId === 1" src="https://likede2-admin.itheima.net/img/pic_1.834b274c.png" alt="" class="dailogImg">
            <img v-else-if="row.taskStatusTypeEntity.statusId === 4" src="https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png" alt="" class="dailogImg">
            <img v-else src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="" class="dailogImg">
          </div>
          <div class="dialogFoot">
            <div class="left">
              <p><span>设备编号:</span>{{ row.innerCode }}</p>
              <p><span>运维人员:</span>{{ row.innerCode }}</p>
              <p><span>工单方式:</span> {{ row.createType==='0' ? "手动" : "自动" }}</p>

            </div>
            <div class="right">
              <p><span>创建日期:</span>{{ row.createTime }}</p>
              <p><span>工单类型:</span>{{ row.taskType.typeName }}</p>
              <p><span>备注:</span>{{ row.desc }}</p>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">

          <el-button v-if="row.taskStatusTypeEntity.statusId === 3" type="primary" @click="newList(row) ">重新创建</el-button>
        </span>
      </el-dialog>

    </div>
    <!-- 查看详情-->
    <!-- 工单配置 -->
    <el-dialog
      title="工单配置"
      :visible.sync="setDialog"
      width="30%"
      :before-close="handleClose"
      center
    >
      <el-form label-width="120px" :model="formNum">
        <el-form-item label="补货警戒线:">
          <el-input-number v-model="formNum.alertValue" controls-position="right" style="width:360px" @change="handleChange" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialog = false">取 消</el-button>
        <el-button type="primary" @click="setA">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 工单配置 -->
  </div>
</template>

<script>
import { list, taskDetails, serList, warning, setReplenishment, roleList, newList } from '@/api/operator'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      formNum: {
        alertValue: null
      },
      setDialog: false,
      row: null,
      dialogVisible: false,
      num: '',
      value1: '',
      textarea: '',
      value: '',
      options: [{
        value: 1,
        label: '投放工单'
      },
      {
        value: 2,
        label: '补货工单'
      },
      {
        value: 3,
        label: '维修工单'
      },
      {
        value: 4,
        label: '撤机工单'
      }],
      labelPosition: 'right',
      rules: {
        innerCode: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        createType: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        productType: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        userId: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      formLabelAlign: {
        innerCode: '01000023',
        createType: 1,
        productType: '',
        userId: '',
        desc: null,
        details: {
          channelCode: {}, // 货到编号
          expectCapacity: {}, // 补货数量
          skuId: {}, // 商品Id
          skuName: {}, // 商品名称
          skuImage: []// 商品图片

        }
      },
      innerVisible: false,
      outerVisible: false,
      formInline: {
        status: '',
        taskCode: ''
      },
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: null,
        totalCount: null,
        isRepair: false

      },
      queryObj1: {
        pageIndex: 1,
        pageSize: 100,
        totalPage: null,
        totalCount: null,
        isRepair: false

      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      tableData1: [],
      roleList: []
    }
  },

  created() {
    this.lookList()
  },
  methods: {
    async  data1() {
      const data = await newList(this.formLabelAlign)
      console.log(data)
    },
    handleClose() {
      this.setDialog = false
    },
    async setA() {
      const res = await setReplenishment(this.formNum)
      console.log(res)
      this.setDialog = false
    },
    // 配置工单
    async setDialogOpen() {
      const data = await warning()
      this.formNum.alertValue = data
      this.setDialog = true
    },
    // 搜索功能
    async search() {
      const data = await serList({ ...this.formInline, ...this.queryObj })
      console.log(data)
      this.tableData = data.currentPageRecords
    },
    // 查看详情
    fun(row) {
      this.row = row
      this.dialogVisible = true
    },
    // 补货数量
    async handleClick() {
      const data = await taskDetails(this.formLabelAlign.innerCode)
      console.log(data)
      this.tableData1 = data
      this.innerVisible = true
      this.formLabelAlign.details.channelCode = this.tableData1.map(item => {
        return item.channelCode
      })
      this.formLabelAlign.details.expectCapacity = this.tableData1.map(item => {
        return item.maxCapacity
      })
      this.formLabelAlign.details.skuId = this.tableData1.map(item => {
        return item.sku.skuId
      })
      this.formLabelAlign.details.skuName = this.tableData1.map(item => {
        return item.sku.skuName
      })
      this.formLabelAlign.details.skuImage = this.tableData1.map(item => {
        return item.sku.skuImage
      })
    },
    async change() {
      console.log(1)
      if (this.queryObj.pageIndex < this.queryObj.totalPage) {
        this.queryObj.pageIndex += 1
        console.log(1)
        this.lookList()
      }
    },
    change1() {
      if (this.queryObj.pageIndex > 1) {
        this.queryObj.pageIndex -= 1
        this.lookList()
      }
    },
    async  onSubmit() {
      this.outerVisible = true
      const data = await roleList(this.queryObj1)
      this.roleList = data.currentPageRecords
      console.log(this.roleList)
    },
    async lookList() {
      const data = await list(this.queryObj)
      console.log(data)
      this.tableData = data.currentPageRecords
      this.queryObj.totalPage = data.totalPage
      this.queryObj.totalCount = data.totalCount
      this.tableData = this.tableData.map((item, index) => {
        const indexs = (this.queryObj.pageIndex - 1) * 10 + index + 1
        const obj = { index: indexs }
        item = { ...obj, ...item }
        return item
      })
    },
    handleChange() {
      console.log(1)
    }

  }
}
</script>

<style scoped lang="scss">
.middle {
  position: relative;
  height: 50px;
  width: 100%;
  background-color: #f8f8f8;
  line-height: 50px;
    img {
      margin-left: 30px;
      position: relative;
      bottom: -5px;
    }
    span {
      margin-left: 20px;
    }
    .dailogImg {
      position: absolute;
      top: -16px;
      right: 70px;
    }
}
.dialogFoot{
  display: flex;
  margin-left: 25px;
  .left{
    flex: 1;
    p {
      margin-bottom: 20px;
     span {
      margin-right: 20px;
     }
    }
  }
  .right{
    flex: 1;
    margin-left: 20px;
      p {
      margin-bottom: 20px;
     span {
      margin-right: 20px;
     }
  }}
}
   ::v-deep .el-dialog{
    border-radius: 10px;
  }
.box {

  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {

      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
